<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Sign in &laquo; Admin</title>
  <link rel="stylesheet" href="../static/assets/vendors/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="../static/assets/css/admin.css">
  <style>
  #verify_code{
    width: 60%;display: inline-block;vertical-align: middle;
  }
  #verify_img{
    vertical-align: middle;
    cursor: pointer;
  }
  </style>
</head>
<body>
  <div class="login">
    <form class="login-wrap">
      <img class="avatar" src="../static/assets/img/default.png">
      <!-- 有错误信息时展示 -->
      <div class="alert alert-danger" style="display:none">
        <strong>错误！</strong> <span id="msg">用户名或密码错误！</span>
      </div>
      <div class="form-group">
        <label for="email" class="sr-only">邮箱</label>
        <input id="email" type="email" class="form-control" placeholder="邮箱" autofocus>
      </div>
      <div class="form-group">
        <label for="password" class="sr-only">密码</label>
        <input id="password" type="password" class="form-control" placeholder="密码">
      </div>
      <!-- 验证码 -->
      <div class="form-group">
        <label for="verify_code" class="sr-only">验证码</label>
        <input id="verify_code" type="text" class="form-control" placeholder="验证码">
        <img tsrc='./public/_verify.php' id="verify_img" src="./public/_verify.php" title="点击刷新" alt="验证码" style="display: inline-block;">
      </div>
      <!-- <a class="btn btn-primary btn-block" href="javascript:;">登 录</a>-->
      <span id="btn-login" class="btn btn-primary btn-block">登 录</span> 
    </form>
  </div>
  <script src="../static/assets/vendors/jquery/jquery.min.js"></script>
  <script>
  $(function(){
      $("#verify_img").on('click',function(){
          $(this).attr('src',$(this).attr('tsrc')+'?r='+Math.random());
          console.log('验证码已更新');
      }).trigger('click');
  })
      

      // 点击登录
      $("#btn-login").on("click",function(){
          // 获取邮箱和密码
          var email=$("#email").val();
          var password=$("#password").val();
          // 获取验证码
          var verify=$("#verify_code").val();

          // 判断邮箱格式是否正确   // 137ey672e@qq.com
          // var reg=/\w+[@]\w+[.]\w+/;
          var reg=/\w+\@\w+\.\w+/;
          // reg.test(email)  匹配返回true  不匹配返回false
          if(!reg.test(email)){
              $("#msg").text('邮箱格式不正确，请重新输入');
              $(".alert").show();
             return;
          }
          // 密码 3-20位
          var pwdReg=/\w{3,20}/;
          if(!pwdReg.test(password)){
              $("#msg").text('密码长度错误，请重新输入');
              $(".alert").show();
             return;
          }

           // 判断用户是否输入验证码
          if(verify.trim()==''){
            $("#msg").text('请输入验证码');
            $(".alert").show();
            return;
          }
          
         // 如果正确  发送ajax  把邮箱和密码发送到后台
         $.ajax({
           type:"post",
           url:"api/_userLogin.php",
           data:{
             email:email,
             password:password,
             verify:verify
           },
           dataType:'json',
           success:function(res){
              // console.log(res)
              if(res.code==1){
                alert('登录成功')
                location.href='index.php';
              }else{
                console.log(res);
                $("#msg").text(res.msg);
                $(".alert").show();
              }
           }
         })



      })
     


  
  
  </script>
</body>
</html>
